<template>
    <div class="main">
        <div class="duty_head">
            <div class="duty_add">
                <el-button type="primary" @click="event.Add">新增</el-button>
            </div>
            <div class="search">
                <el-input v-model="data.key" style="width: 350px" size="large" placeholder="请输入关键字查询"
                    :suffix-icon="Search" />
            </div>
        </div>



        <div class="duty_main">
            <el-skeleton animated :rows="8" :loading="data.isFirst">
                <el-table :data="data.data" v-loading="data.loading" style="width:100%">
                    <el-table-column label="序号" width="70" type="index"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="职务名称" width="120" prop="name">

                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="描述" width="120" prop="value">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.explain }}
                            </el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column :show-overflow-tooltip="true" label="创建时间" width="280" prop="time">
                        <template #default="scope">
                            <el-tag type="primary">
                                <el-icon>
                                    <timer />
                                </el-icon>
                                {{ scope.row.createtime }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="人数" width="200" prop="value">
                        <template #default="scope">
                            <el-tag :type="scope.row.count == 0 ? 'danger' : 'success'">
                                {{ scope.row.count }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="职务等级" width="160" prop="value">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.lv }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="禁用" width="120" prop="isban">
                        <template #default="scope">
                            <el-tag :type="scope.row.isban == 0 ? 'success' : 'danger'">
                                {{ scope.row.isban == 0 ? "否" : "是" }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" prop="name" width="200">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="light" content="详情" placement="left-start">
                                <el-button type="primary" :icon="Edit" circle @click="event.Detail(scope.row.id)" />
                            </el-tooltip>

                            <el-tooltip class="box-item" effect="light" :content="scope.row.isban === 0 ? '禁用' : '启用'"
                                placement="left-start">

                                <el-button :type="scope.row.isban === 0 ? 'danger' : 'success'"
                                    @click="event.Ban(scope.row.id)" :icon="Star" circle />
                            </el-tooltip>

                            <el-popconfirm @confirm="event.Delete(scope.row.id)" title="确认删除吗？">
                                <template #reference>
                                    <el-button v-if="scope.row.count === 0" :icon="Delete" type="danger" circle>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-foot" style="margin-left: 500px; margin-top: 20px;">
                    <el-pagination background size="small" layout="prev, pager, next"
                        v-model:current-page="data.pages!.page" v-model:page-size="data.pages!.limit"
                        :total="data.pages?.total" />
                </div>
            </el-skeleton>
        </div>

        <el-dialog v-model="data.isModel" :modal="data.isModel">
            <el-descriptions title="新增职务" direction="vertical" :column="1" border>
                <el-descriptions-item label="职务名称">
                    <el-input type="text" v-model="data.name">
                    </el-input>
                </el-descriptions-item>

                <el-descriptions-item label="等级">
                    <el-input-number v-model="data.lv" :min="1" />
                </el-descriptions-item>

                <el-descriptions-item label="描述">
                    <el-input type="text" v-model="data.explain">
                    </el-input>
                </el-descriptions-item>


            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.isModel = false">返回</el-button>

                    <el-popconfirm @confirm="event.saveDic" title="确定要保存吗？">
                        <template #reference>
                            <el-button type="primary">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>

                </div>
            </template>
        </el-dialog>



        <el-dialog v-model="data.isModel1" :modal="data.isModel1">
            <el-skeleton animated :rows="8" :loading="data.isFirst2">
                <el-descriptions title="职务详情" direction="vertical" :column="1" border>
                    <el-descriptions-item label="职务名称">
                        <el-input type="text" v-model="data.dname">
                        </el-input>
                    </el-descriptions-item>

                    <el-descriptions-item label="等级">
                        <el-input-number v-model="data.dlv" :min="1" />
                    </el-descriptions-item>

                    <el-descriptions-item label="描述">
                        <el-input type="text" v-model="data.dexplain">
                        </el-input>
                    </el-descriptions-item>


                </el-descriptions>
            </el-skeleton>
            <template #footer>

                <div class="dialog-footer">
                    <el-button @click="data.isModel1 = false">返回</el-button>

                    <el-popconfirm @confirm="event.saveduty" title="确定要修改吗？">
                        <template #reference>
                            <el-button type="primary">
                                修改
                            </el-button>
                        </template>
                    </el-popconfirm>

                </div>
            </template>

        </el-dialog>


    </div>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue';
import type { Duty_Index_Data } from '../../utils/types';
import { Get_Duty, Delete_Duty, Ban_Duty, Add_Duty, Get_Duty_Detail, Update_Duty } from '../../api/org/duty'
import { Edit, Delete, Star } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { Timer } from '@element-plus/icons-vue'
import { msg } from '@/utils/msg'
import router from '@/router';
import { update_dept } from '../../api/org/dept';

const data = reactive<Duty_Index_Data>({
    isFirst: true,
    data: [],
    loading: false,
    key: '',
    pages: {
        page: 1,
        limit: 10,
        total: 0
    },
    isModel: false,
    name: "",
    lv: 0,
    explain: "",
    isModel1: false,
    name1: "",
    explain1: "",
    lv1: 0,
    dname: "",
    dexplain: "",
    dlv: 0,
    isFirst2: true
})
const event = {
    async Ban(id:string) {
        data.loading = true;
        const res = await Ban_Duty({
            id: id,
        });
        if (res.code === 0) {
            data.loading = false;
            msg(res);
            method.bind();
        } else {
            msg(res);
            method.bind();
        }
    },
    async Add() {
        data.isModel = true;

    },
    async saveduty() {
        const res = await Update_Duty({
            id: data.id,
            name: data.dname,
            lv: data.dlv,
            explain: data.dexplain
        });
        if (res.code === 0) {
            msg(res);
            data.isModel1 = false;
            method.bind();
        }
    },
    async saveDic() {
        if (data.name == "" || data.explain == "") {
            msg({
                message: "数据不能为空"
            });
        }
        if (typeof (data.lv) == "string") {
            msg({
                message: "等级需要为数字"
            })
        }
        const res = await Add_Duty({
            name: data.name,
            explain: data.explain,
            lv: data.lv
        });
        if (res.code === 0) {
            data.isModel = false;
            msg(res);
            method.bind();
        } else {
            data.isModel = false;
            msg(res);
            method.bind();
        }

    },
    async Delete(ids: string) {
        data.loading = true;
        const res = await Delete_Duty({
            ids: [ids]
        });
        console.log(res)
        if (res.code === 0) {
            data.loading = false;
            msg(res)
            method.bind();
        } else {
            msg(res);
            method.bind();
        }
    },
    async Detail(id: string) {
        data.isModel1 = true;
        data.isFirst2 = true;
        data.id = id;
        const res = await Get_Duty_Detail({ id: id });
        if (res.code === 0) {
            data.dname = res.data.name;
            data.dlv = res.data.lv;
            data.dexplain = res.data.explain;
            data.isFirst2 = false;
        }
    }
}

const method = {
    async bind() {
        data.isFirst = true;
        const res = await Get_Duty({
            page: data.pages?.page || 1,
            limit: data.pages?.limit || 10,
            key: data.key || ""
        });
        console.log(res.data.data)
        if (res.code === 0) {
            data.data = res.data.data;
            data.pages!.total = res.data.total;
            data.isFirst = false;
            data.loading = false;


        }
    }
}
watchEffect(() => {
    method.bind();
})
</script>

<style scoped>
.main {
    width: 100%;
    height: calc(100vh - 150px);
    margin: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.duty_head {
    
    height: 60px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
}

.duty_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 3;
    line-height: 50px;
}

.duty_main {
    margin: 8px;
}
</style>